<!-- ShippingCompanyContent.vue -->
<template>
  <div class="shipping-company-content">
    <!-- 子标签页 -->
    <div class="sub-tabs">
      <span
          v-for="(tab, index) in subTabs"
          :key="index"
          :class="{ 'active': activeSubTab === tab }"
          @click="setActiveSubTab(tab)"
      >
        {{ tab }}
      </span>
    </div>

    <!-- 子标签页内容 -->
    <component
        :is="currentSubComponent"
        :contentType="activeSubTab"
    ></component>
  </div>
</template>

<script>
import ShippingCompanyFCLRates from './ShippingCompanyFCLRates.vue'
import ShippingCompanyDemurrageContent from './ShippingCompanyDemurrageContent.vue'

export default {
  name: 'ShippingCompanyContent',
  components: {
    ShippingCompanyFCLRates,
    ShippingCompanyDemurrageContent,
  },
  data() {
    return {
      activeSubTab: '整箱运费',
      subTabs: ['整箱运费', '拼箱运费', '起运港费用', '目的港费用', '出口集装箱滞箱费', '进口集装箱滞箱费'],
    }
  },
  computed: {
    currentSubComponent() {
      if (['整箱运费', '拼箱运费', '起运港费用', '目的港费用'].includes(this.activeSubTab)) {
        return ShippingCompanyFCLRates
      } else {
        return ShippingCompanyDemurrageContent
      }
    }
  },
  methods: {
    setActiveSubTab(tab) {
      this.activeSubTab = tab
    }
  }
}
</script>

<style scoped>
.shipping-company-content {
  font-family: Arial, sans-serif;
}

.sub-tabs {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.sub-tabs span {
  padding: 10px 15px;
  cursor: pointer;
}

.sub-tabs span.active {
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
}
</style>
